<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>轮播图</title>
		<link rel="stylesheet" type="text/css" href="../css/1.css"/>
	</head>
	<body>
		<div class="aa">
			<ul class="bb" id="img" onmousemove="over()" onmouseout="out()">
					<li><img src="../img/1.jpg" alt=""></li>
					<li><img src="../img/2.jpg" alt=""></li>
					<li><img src="../img/3.jpg" alt=""></li>
					<li><img src="../img/4.jpg" alt=""></li>
					<li><img src="../img/5.jpg" alt=""></li>
			</ul>
			<div class="left-botton indexs" onclick="bb()">&lt;</div>
			<div class="right-botton indexs" onclick="cc()">&gt;</div>
			<ul class="cc indexs" id="bott" onmousemove="over()" onmouseout="out()" >
				<li onmouseover="bott1()"></li>
				<li onmouseover="bott2()"></li>
				<li onmouseover="bott3()"></li>
				<li onmouseover="bott4()"></li>
				<li onmouseover="bott5()"></li>
			</ul>
		</div>
		<script type="text/javascript">
			var imgs=document.getElementById("img").children;
			var botts=document.getElementById("bott").children;
			var dingshiqi;
			var index=0;
			aa();
			function xunhua(){
				for(var i=0;i<imgs.length;i++){
					imgs[i].style.cssText="z-index: 0;"
					botts[i].style.cssText="background-color: #FFFFFF;"
				}
				imgs[index].style.cssText="z-index: 100;"
				botts[index].style.cssText="background-color: red;"
			}
			function aa(){
			    dingshiqi=setInterval(function(){
					index++;
					if(index==imgs.length){
						index=0;
					}
			      xunhua();
				},1000 );
				};
				function bb(){
					clearInterval(dingshiqi);
					index--;
					if(index<0){
						index=imgs.length-1;
					}
					xunhua();
					aa();
				}
				function cc(){
					clearInterval(dingshiqi);
					index++;
					if(index>imgs.length-1){
						index=0;
					}
					xunhua();
					aa();
				}
				function bott1(){
					index=0;
					clearInterval(dingshiqi);
					xunhua();
					aa();
				}
				function bott2(){
					index=1;
					clearInterval(dingshiqi);
					xunhua();
					aa();
				}
				function bott3(){
					index=2;
					clearInterval(dingshiqi);
					xunhua();
					aa();
				}
				function bott4(){
					index=3;
					clearInterval(dingshiqi);
					xunhua();
					aa();
				}
				function bott5(){
					index=4;
					clearInterval(dingshiqi);
					xunhua();
					aa();
				}
				function over(){
					clearInterval(dingshiqi);
				}
				function out(){
					xunhua();
					aa();
				}
		</script>
	</body>
</html>
